import React from "react";
import { createForm } from "@formily/core";
import { FormProvider, Field, ArrayField } from "@formily/react";
import { Input, Button, Space } from "antd";

const form = createForm();

export default () => (
  <FormProvider form={form}>
    <ArrayField name="array">
      {(field) => {
        return (
          <>
            <div>
              {field.value?.map((item, index) => (
                <div
                  key={index}
                  style={{ display: "flex-block", marginBottom: 10 }}
                >
                  <Space>
                    <Field name={index} component={[Input]} />
                    <Button
                      onClick={() => {
                        field.remove(index);
                      }}
                    >
                      Remove
                    </Button>
                    <Button
                      onClick={() => {
                        field.moveUp(index);
                      }}
                    >
                      Move Up
                    </Button>
                    <Button
                      onClick={() => {
                        field.moveDown(index);
                      }}
                    >
                      Move Down
                    </Button>
                  </Space>
                </div>
              ))}
            </div>
            <Button onClick={() => field.push("")}>Add</Button>
          </>
        );
      }}
    </ArrayField>
  </FormProvider>
);
